<template>
    <div>
        <!-- 关键词搜索栏 -->
        <div>
            <div class="flex">
                <div class="">
                    <!-- 暂时屏蔽新建订单 -->
                    <el-button type="primary" @click="downloadwithdrawa" plain><i class="iconfont icon-excel e-font-14 e-m-r-5"></i>导出Excel</el-button>
                </div>
                <el-form :inline="true" class="demo-form-inline e-m-l-80 e-flex-1 text-right">
                    <el-form-item label="">
                        <div class="flex align-items-center">
                            <div class="e-flex-1">
                                <el-input placeholder="关键词搜索" prefix-icon="el-icon-search" v-model="key" clearable
                                    @change="getList"></el-input>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item class="e-m-r-0">
                        <el-button type="primary" @click="getList(true)">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 更多筛选条件 -->
            <div class="other-search-form is-active">
                <el-form label-position="left" :inline="true" size="small">
                    <div class="flex align-items-center">
                        <!-- 时间筛选 -->
                        <timeChangeList v-model="timeType" @input="getList" @change="changeTime"></timeChangeList>
                    </div>
                    <div class="flex align-items-center">
                        <div class="e-flex-1">
                            <el-form-item label="查询类型">
                                <el-select v-model="type" filterable clearable placeholder="选择查询类型" @change="getList" @clear="getList">
                                    <el-option value="1" label="运营商充值"></el-option>
                                    <el-option value="2" label="回收支出"></el-option>
                                    <el-option value="3" label="加盟商充值"></el-option>
                                    <el-option value="4" label="取消订单"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>

        <!-- 自定义表格 -->
        <custom-table :table-data="tableData" :columns="tableColumns"
            :actions="tableActions" :total="total" :page-index="pageIndex" :page-size="pageSize"
            @page-change="handlePagination" @action-click="handleTableAction">
        </custom-table>
    </div>
</template>

<script>
import timeChangeList from '@/components/form-select-type/timeChangeList.vue'

export default {
    components: {
        timeChangeList
    },
    props: {
        operatorId:{
            type: [Number, String],
            default: null
        }
    },
    data() {
        return {
            loading: true,
            key: '',
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            // 时间类型
            timeType: 0, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
            startDate: '', //开始时间
            endDate: '', //结束时间
            // 查询类型
            type: null, // 运营商充值 = 1, 回收支出 = 2, 加盟商充值 = 3, 取消订单 = 4,
            tableData: [],
            tableColumns: [
                {
                    prop: 'number',
                    label: '单据编号',
                },
                {
                    prop: 'type',
                    label: '类型',
                    width: 120,
                },
                {
                    prop: 'amount',
                    label: '增减金额',
                    width: 120,
                    formatter: row => `${row.amount ? row.amount : '--'}`
                },
                {
                    prop: 'balance',
                    label: '余额（元）',
                    width: 120,
                    formatter: row => `${row.balance ? row.balance : '--'}`
                },
                {
                    prop: 'createddatetime',
                    label: '操作时间',
                    width: 160
                },
                {
                    prop: 'createusername',
                    label: '操作人',
                    width: 120
                },
                {
                    prop: 'relationnumber',
                    label: '关联单据编号',
                    width: 160,
                    formatter: row => `${row.relationnumber ? row.relationnumber : '--'}`
                },
                {
                    prop: 'remark',
                    label: '备注',
                    width: 240
                },
            ],
            tableActions: [
                // {
                //     name: 'view',
                //     label: '查看',
                //     // visible: row => row.status !== 'deleted'
                // },
                // {
                //     name: 'cancel',
                //     label: '取消订单',
                //     visible: row => row.managestate != 5
                // }
            ]
        }
    },
    watch: {
        // tablefield:{
        //   deep:true,//true为进行深度监听,false为不进行深度监听
        //   handler(newVal){
        //     localStorage.setItem('order-user-list', JSON.stringify(newVal));
        //   }
        // }
    },
    mounted() {
        this.getList()
    },
    methods: {
        // 翻页操作处理
        handlePagination({ pageIndex, pageSize }) {
            this.pageIndex = pageIndex
            this.pageSize = pageSize
            this.getList(false) // 获取新数据
        },
        // 操作按钮点击事件
        handleTableAction({ action, row, event }) {
            switch (action) {
                case 'view':
                    // this.goViewShow(event, row)
                    break
                case 'cancel':
                    // this.cancelOrder(row)
                    break
            }
        },
        // 选择时间
        changeTime(e) {
            console.log(e)
            this.startDate = e['startDate']
            this.endDate = e['endDate']
            this.timeType = e['timeType']
            this.getList()
        },
        getList(renew = true) {
            if (renew == true) {
                this.pageIndex = 1
            }
            this.tableData = []
            this.loading = true
            this.param = {
                "pageIndex": this.pageIndex,
                "pageSize": this.pageSize,
                "key": this.key,
                "timeType": this.timeType,
                "startDate": this.startDate,
                "endDate": this.endDate,
                "operatorId": this.operatorId || 0,
            }
            if(this.type > 0){
                this.param.type = this.type
            }
            return this.$axios.post('/Operator/Balance/List', this.param).then((res) => {
                this.loading = false
                this.tableData = res.rows;
                this.total = res.total;
            }).catch((err) => {
                this.loading = false
            })
        },
        downloadwithdrawa() {
            this.param = {
                "pageIndex": this.pageIndex,
                "pageSize": this.pageSize,
                "key": this.key,
                "timeType": this.timeType,
                "startDate": this.startDate,
                "endDate": this.endDate,
                "operatorId": this.operatorId || 0,
            }
            if(this.type > 0){
                this.param.type = this.type
            }
            this.$axios.post('/Operator/Balance/List', {
                "request": param,
                "fields": [
                    {
                        "e": "number",
                        "c": "单据编号"
                    },
                    {
                        "e": "amount",
                        "c": "增减金额"
                    },
                    {
                        "e": "balance",
                        "c": "余额"
                    },
                    {
                        "e": "type",
                        "c": "类型"
                    },
                    {
                        "e": "createddatetime",
                        "c": "创建时间"
                    },
                    {
                        "e": "createusername",
                        "c": "经手人"
                    },
                    {
                        "e": "relationnumber",
                        "c": "关联单据编号"
                    },
                    {
                        "e": "remark",
                        "c": "备注"
                    },
                ]
            }, {
                responseType: 'blob'
            }).then(res => {
                console.log(res)
                let content = res;
                let fileName = '余额变动.xls'
                this.utils.saveAndExport(content, fileName)
            })
        }
    },
    // 获取列表数据统计
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '合计';
                return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                }, 0);
                sums[index] += '';
            } else {
                sums[index] = '';
            }

            // if (column.label == '回收金额（元）') {
            //     sums[index] = Number(sums[index]).toFixed(2)
            // }
            // else if (column.label == '重量(KG)') {
            //     sums[index] = Number(sums[index]).toFixed(2)
            // } else {
            //     sums[index] = ''
            // }
        });

        return sums;
    },
}
</script>

<style lang="scss" scoped>

</style>